<template>
  <div p-16rpx>
    <!-- 签到 -->
    <div flex bg-white my-20rpx py-60rpx px-16rpx rounded-24rpx flex-col items-center>
      <div class="circle-box" bg-main-color w-200rpx h-200rpx text-white leading-200rpx text-center @click="signIn()">
        <span v-if="!ifSign" :class="{ active: signFlag || ifSign }">签到</span>
        <span v-else :class="{ active: signFlag || ifSign }"
          :style="ifSign ? 'transform: rotateY(0deg);' : ''">已签</span>
      </div>
      <div text-26rpx text-neutral-400 mt-50rpx>坚持每天连续签到可以获多重奖励哦</div>
    </div>
    <!-- 每日记录 -->
    <div bg-white my-20rpx py-16rpx px-30rpx rounded-24rpx>
      <div text-34rpx>每日记录<span text-neutral-400 ml-10rpx text-26rpx>（{{ currentMonth }}）</span></div>
      <div class="week" flex items-center justify-between text-neutral-400 mt-40rpx mb-20rpx text-28rpx>
        <div w-70rpx text-center v-for="item in weekArr" :key="item.id">{{ item }}</div>
      </div>
      <div class="date" mt-8rpx mb-20rpx flex justify-between flex-wrap v-for="obj in dataObj" :key="obj.id">
        <div class="item" w-70rpx h-80rpx text-center overflow-hidden relative text-neutral-700 v-for="item in obj"
          :key="item.id" :class="item == '' ? 'hide' : ''" :animation="item == currentDay ? animationData : ''">
          <div class="just" w-70rpx h-80rpx flex flex-col items-center absolute
            :class="signArr.indexOf(item) != -1 ? 'active' : ''">
            <div class="top" relative flex-1 leading-40rpx>{{ item }} </div>
            <div class="bottom" color-gray><nut-icon name="minus" v-if="item <= currentDay" /></div>
          </div>
          <div class="back" w-70rpx h-80rpx flex flex-col items-center absolute
            :class="signArr.indexOf(item) != -1 ? 'active' : ''"
            :style="signArr.indexOf(item) != -1 && ifSign ? 'transform: rotateY(0deg);' : signArr.indexOf(item) != -1 && item != currentDay ? 'transform: rotateY(0deg);' : ''">
            <div class="top" text-main-color>{{ item }}</div>
            <div class="bottom" text-main-color><nut-icon name="checklist" /></div>
          </div>
        </div>
      </div>
      <!-- 签到成功弹框 -->
      <nut-overlay v-model:visible="maskFlag" :close-on-click-overlay="false">
        <div class="wrapper" flex items-center justify-center h-100vh>
          <div class="content" w-540rpx h-510rpx bg-white overflow-hidden>
            <div class="mask-header" bg-main-color w-540rpx h-130rpx leading-130rpx text-center text-white relative>
              签到成功
              <div w-80rpx h-80rpx absolute right-0 top-0 flex items-center justify-center text-white @click="close">
                <nut-icon name="circle-close" size="22" />
              </div>
            </div>
            <div class="mask-con" w-540rpx h-380rpx flex flex-col items-center justify-evenly box-border py-20rpx>
              <div text-main-color><nut-icon name="checklist" size="60" /></div>
              <text text-26rpx text-neutral-400>连续签到可获得额外奖励哦！</text>
            </div>
          </div>
        </div>
      </nut-overlay>
    </div>
  </div>
</template>

<script setup lang="ts">
import { sign, signTime } from "@/api/point";
import { onLoad } from '@dcloudio/uni-app';
const routerVal = ref<any>({});

const signFlag = ref<boolean>(false);
const animationData = ref<any>({});
const maskFlag = ref<boolean>(false); // 签到成功弹框
const transFlag = ref<boolean>(false); // 动画
const weekArr = ref<any>(["日", "一", "二", "三", "四", "五", "六"]); // 周数组
const dateArr = ref<any>([]); // 每个月的天数
// 实例化每个月
const monthArr = ref<any>(["1月", "2月", "3月", "4月", "5月", "6月", "7月", "8月", "9月", "10月", "11月", "12月",]); // 今天一个月英文
const currentMonth = ref<any>(""); // 当月
const currentMonthIndex = ref<any>("");// 当月
const currentYear = ref<any>(""); // 今年
const currentDay = ref<any>(""); // 今天
const dataObj = ref<any>([]); // 一个月有多少天这个获取
const signArr = ref<any>([]); // 本月签到过的天数 该参数用于请求接口后获取当月都哪天签到了
const signAll = ref<any>([]); // 所有签到数据
const ifSign = ref<any>(false); // 今天是否签到

// 补0
function makeUp(val: any) {
  if (val >= 10) {
    return val;
  } else {
    return "0" + val;
  }
};
// 获取当前月份有几周
function getWeekByDay(dayValue: any) {
  let day = new Date(Date.parse(dayValue.replace(/-/g, "/"))).getDay(); //将日期值格式化
  return day;
};
/**
 *  循环出当前月份的时间
 *  例子：
 *  "","","","","","",1,
 *  2 ,3 ,4 ,5 ,6 ,7 ,8,
 *  ...依次向下排
 */
function getMonthDays(index: number, day: any) {
  //day 当月1号是周几
  dateArr.value = [];
  dataObj.value = [];
  for (let i = 0; i < day; i++) {
    dateArr.value.push("");
  }
  if (index == 0 || index == 2 || index == 4 || index == 6 || index == 7 || index == 9 || index == 11) {
    for (let i = 1; i < 32; i++) { dateArr.value.push(i); }
  }
  if (index == 3 || index == 5 || index == 8 || index == 10) {
    for (let i = 1; i < 31; i++) { dateArr.value.push(i); }
  }
  if (index == 1) {
    if ((currentYear.value % 4 == 0 && currentYear.value % 100 != 0) || currentYear.value % 400 == 0) {
      for (let i = 1; i < 30; i++) { dateArr.value.push(i); }
    } else {
      for (let i = 1; i < 29; i++) { dateArr.value.push(i); }
    }
  }
  for (let y = 0; y < 10; y++) {
    if (dateArr.value.length > 7) {
      dataObj.value.push(dateArr.value.splice(0, 7));
    } else {
      for (let i = 0; i < 7 - dateArr.value.length; i++) { dateArr.value.push(""); }
    }
  }
  dataObj.value.push(dateArr.value);
};
// 获取当前已经签到的时间
function currentSignData() {
  let date = new Date(), index = date.getMonth(), curDay = null;
  signArr.value = [];
  for (let i = 0; i < signAll.value.length; i++) {
    let item = signAll.value[i];
    item.createTime = item.createTime.split(" ")[0];
    let itemVal = item.createTime.split("-");
    if (Number(itemVal[0]) === Number(currentYear.value) && Number(itemVal[1]) === Number(currentMonthIndex.value)) {
      signArr.value.push(Number(itemVal[2]));
    }
    if (Number(itemVal[0]) === Number(date.getFullYear()) && Number(itemVal[1]) === Number(index + 1) && Number(itemVal[2]) === Number(date.getDate())) {
      ifSign.value = true;
    }
  }
};
// 获取今天时间
function getDate() {
  let date = new Date(), index = date.getMonth(), curDay = null;
  currentYear.value = date.getFullYear();
  currentMonth.value = monthArr.value[index];
  currentMonthIndex.value = index + 1;
  currentDay.value = date.getDate();
  if (currentDay.value == signArr.value[signArr.value.length - 1]) {
    ifSign.value = true;
  }
  curDay = getWeekByDay(currentYear.value + "-" + (index + 1) + "-1");
  getMonthDays(index, curDay);
  currentSignData();
};
// 点击签到
async function signIn() {
  await sign().then((response) => {
    if (ifSign.value) return; // 今天是否签到
    if (signFlag.value) return;
    if (response.data.code != 200) {
      uni.showToast({ title: response.data.message, duration: 2000, icon: "none", });
      return false;
    }
    let animation = uni.createAnimation({ duration: 200, timingFunction: "linear", });
    signArr.value.push(currentDay.value);
    setTimeout(() => {
      signFlag.value = true;
      maskFlag.value = true;
      ifSign.value = !ifSign.value;
      animation.rotateY(0).step();
      animationData.value = animation.export();
    }, 200);
  });
};
// 签到成功后关闭弹窗
function close() {
  maskFlag.value = false;
  transFlag.value = true;
  setTimeout(() => {
    transFlag.value = false;
  }, 500);
};
// 初始化数据
onLoad(async (options: any) => {
  routerVal.value = options
  //获取签到数据
  let response = await signTime(
    new Date().getFullYear() + "" + makeUp(new Date().getMonth() + 1)
  );
  signAll.value = response.data.result;
  //获取展示数据
  getDate();
})
</script>

<style scoped lang="scss">
.circle-box {
  box-shadow: 0 4rpx 24rpx 0 rgba($color: $main-color, $alpha: 1);
  border-radius: 50%;
}

.date {
  .item {
    &.hide {
      opacity: 0;
    }

    .just {
      &.active {
        display: none;
      }
    }

    .back {
      display: none;

      &.active {
        display: flex;
      }


    }
  }
}

.wrapper {
  .content {
    border-radius: 20rpx;
  }
}
</style>
